<template>
  <BaseDialog inject-key="NIL_FORM">
    <div class="panel">
      <div class="md">
        <MdEditor
          v-model="formData.form.items.md"
          :toolbars="toolbars"
          style="height: 760px"
        />
      </div>
      <div class="right">
        <n-form-item label-placement="top" label="标题">
          <n-input
            v-model:value="formData.form.items.title"
            :disabled="formData.form.loading"
            type="text"
            placeholder="请输入文本"
            :show-count="false"
          />
        </n-form-item>
        <n-form-item label-placement="top" label="Slug">
          <n-input
            v-model:value="formData.form.items.slug"
            :disabled="formData.form.loading"
            type="text"
            placeholder="请输入文本"
            :show-count="false"
          />
        </n-form-item>
        <n-form-item label-placement="top" label="分类">
          <n-select
            v-model:value="formData.form.items.tid"
            :disabled="formData.form.loading"
            placeholder="请选择分类"
            :options="formData.form.extra.types"
            label-field="title"
            value-field="id"
          >
          </n-select>
        </n-form-item>
        <n-form-item label-placement="top" label="标签">
          <n-input
            v-model:value="formData.form.items.tags"
            :disabled="formData.form.loading"
            type="text"
            placeholder="请输入文本"
            :show-count="false"
          />
        </n-form-item>
        <!-- <n-form-item label-placement="top" label="密码">
          <n-input
            v-model:value="formData.form.items.password"
            :disabled="formData.form.loading"
            type="text"
            placeholder="请输入文本"
            :show-count="false"
          />
        </n-form-item> -->
        <n-form-item label-placement="top" label="权重">
          <n-input-number
            v-model:value="formData.form.items.weight"
            :disabled="formData.form.loading"
            style="width: 100%"
          />
        </n-form-item>
        <n-form-item label="允许评论">
          <n-switch
            checked-value="1"
            unchecked-value="0"
            v-model:value="formData.form.items.allowComment"
            :disabled="formData.form.loading"
          />
        </n-form-item>
      </div>
    </div>
  </BaseDialog>
</template>

<script setup>
import { MdEditor } from "md-editor-v3";
import { inject } from "vue";
import "md-editor-v3/lib/style.css";

const formData = inject("NIL_FORM");
const toolbars = ["italic", "underline", "bold", "-", "code", "=", "preview"];
</script>

<style scoped lang="scss">
.panel {
  display: flex;
  flex-shrink: 0;
  gap: 16px;
  .md {
    flex: 1;
  }
  .right {
    width: 400px;
  }
}
</style>
